{% extends 'forms/' ~ layout|default('field') ~ '.html.twig' %}

{# Not overridable #}
{% block overridable %}
{% endblock %}

{% block contents %}
    <div class="g5-tabs-container">
        {% if field.fields %}
            {% set tabs = [] %}
            {% set panes = [] %}
            {% set fieldId = 'g-tabs-container-' ~ (name|fieldName) ~ '-' %}

            {# collect tabs and panes #}
            {% for tab, content in field.fields %}
                {% set tabs = tabs|merge([content.label|default(tab)]) %}
                {% set panes = panes|merge([content.fields|default([])]) %}
            {% endfor %}

            <div class="g-tabs" role="tablist">
                <ul>
                    {% for tab in tabs %}
                        <li {{ not loop.index0 ? 'class="active"' : '' }}>
                            <a href="#"
                               id="{{ fieldId ~ loop.index0 ~ '-tab'|lower }}"
                               aria-controls="{{ fieldId ~ loop.index0 ~ '-pane'|lower }}"
                               aria-expanded="{{ not loop.index0 ? 'true' : 'false' }}"
                               role="presentation"><span>{{ tab }}</span></a>
                        </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="g-panes">
                {% for pane in panes %}
                    <div class="g-pane clearfix {{ not loop.index0 ? 'active' : '' }}"
                         role="tabpanel"
                         id="{{ fieldId ~ loop.index0 ~ '-pane'|lower }}"
                         aria-labelledby="{{ fieldId ~ loop.index0 ~ '-tab'|lower }}"
                         aria-expanded="{{ not loop.index0 ? 'true' : 'false' }}">
                        {% for childName, child in pane %}
                            {% if childName starts with '.' %}
                                {% set childName = childName|trim('.') %}
                            {% endif %}

                            {% set childName = childName|trim('.') %}
                            {% set childValue = nested(data, scope ~ childName) %}
                            {% set childDefault = nested(defaults, scope ~ childName) %}
                            {% set childPrefix = prefix ~ childName ~ '.' %}

                            {% if child.type %}
                                {% include ["forms/fields/" ~ child.type|replace('.', '/') ~ ".html.twig", 'forms/fields/unknown/unknown.html.twig']
                                with {name: childName, field: child, current_value: childValue, value: null, default_value: childDefault, prefix: childPrefix } %}
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>

        {% endif %}
    </div>
{% endblock %}